<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-11 09:09:39
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-18 21:55:41
 * @Description: 文章编辑发布
-->
<template>
  <div class="content">
    <el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>发布文章</span>
        </div>
      </template>
      <el-form
        ref="articleFormRef"
        :rules="rules"
        label-position="top"
        :model="articleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="articleForm.title"
            placeholder="Please input article title"
          />
        </el-form-item>
        <el-form-item label="摘要" prop="description">
          <el-input
            v-model="articleForm.description"
            placeholder="Please input article description"
            :rows="2"
            cate_1st="textarea"
          />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 500px; overflow-y: hidden"
              v-model="articleForm.content"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            />
          </div>
        </el-form-item>
        <el-form-item label="一级分类" prop="cate_1st">
          <el-select
            v-model="articleForm.cate_1st"
            class="m-2"
            placeholder="Select"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="cate_2nd">
          <el-select
            v-model="articleForm.cate_2nd"
            class="m-2"
            placeholder="Select"
          >
            <el-option
              v-for="item in subCategoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="封面" prop="main_photo">
          <SingleUpload v-model="articleForm.main_photo" />
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item>
          <el-button
            class="btn-1"
            type="primary"
            style="width: 100%"
            size="large"
            round
            @click.prevent="onSubmit(articleFormRef)"
            >发布</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
 
<script setup>
import {
  ref,
  reactive,
  computed,
  onBeforeUnmount,
  shallowRef,
  onMounted,
} from "vue";
import SingleUpload from "@/components/SingleUpload.vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { article, category } from "@/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

// 获取分类
const categoryList = (await category.list({ type: "tree" })).data;
const subCategoryList = computed(() => {
  let res = categoryList.find((item) => {
    return item.id === articleForm.cate_1st;
  });
  if (res) return res.children;
  return [];
});

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p>hello</p>");

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 表单实例
const articleFormRef = ref(null);

// 表单
const articleForm = reactive({
  title: "",
  description: "",
  cate_1st: null,
  cate_2nd: null,
  main_photo: "",
  content: "",
});

// 验证规则
const rules = reactive({
  title: [{ required: true, message: "请填写文章标题", trigger: "blur" }],
  description: [{ required: true, message: "请填写文章摘要", trigger: "blur" }],
  cate_1st: [
    { required: true, message: "请填加文章一级分类", trigger: "blur" },
  ],
  cate_2nd: [
    { required: true, message: "请填加文章二级分类", trigger: "blur" },
  ],
  // main_photo: [{ required: true, message: "请添加封面", trigger: "blur" }],
  content: [{ required: true, message: "请填写文章内容", trigger: "blur" }],
});

// 发布文章
const onSubmit = (form) => {
  form.validate(async (valid, fields) => {
    if (valid) {
      let res = await article.release(articleForm);
      if (res.status) {
        ElMessage.success("发布成功");
        router.replace("/article/list");
        return;
      }
      ElMessage.error(res.msg);
      return;
    }
  });
};
</script>

<style lang='less' scoped>
// .box-card {
// --el-text-color-regular: #fff;
// background-image: linear-gradient(135deg, #97abff 10%, #123597 100%);
// color: #fff;
// .el-input {
// --el-text-color-regular: #000000;
// }
// }
</style>

